<d-category-search
  [category]="category"
  [selectedTags]="selectedTags"
  [defaultSearchField]="defaultSearchField"
  [toggleEvent]="toggleEvent"
  [tagMaxWidth]="100"
  [extendedConfig]="extendedConfig"
  [toggleScrollToTail]="true"
  [categoryInGroup]="true"
  [groupOrderConfig]="groupOrderConfig"
  [customGroupNameTemplate]="groupTpl"
  [customCategoryNameTemplate]="categoryTpl"
  (searchEvent)="searchEvent($event)"
  (createFilterEvent)="createFilter($event)"
  (searchKeyChange)="searchKeyChange($event)"
  (selectedTagsChange)="selectedTagsChange($event)"
  (clearAllEvent)="clearAllEvent($event)"
></d-category-search>
<section *ngIf="finalSearchItems && finalSearchItems.length">
  <p>The categories of the current search:</p>
  <div *ngFor="let item of finalSearchItems">
    <div>{{ item?.label }}: {{ (item?.value)[item.filterKey] || item?.value?.label }}</div>
  </div>
</section>
<section *ngIf="finalSearchKey && finalSearchKey.length">The current search keyword: {{ finalSearchKey }}</section>

<ng-template #groupTpl let-item="tag">
  <i class="icon icon-folder"></i>
  <strong>{{ item?.groupName }}</strong>
</ng-template>

<ng-template #categoryTpl let-item="tag">
  <i class="icon icon-base-info"></i>
  <span title="{{ item?.label }}">{{ item?.label }}</span>
</ng-template>
